@(Id: String, ec: edu_courses, ei: edu_instructors, ein: edu_institutions, eco: List[edu_comments], et: List[edu_tags], ecs:edu_coursesstudents)
@page("Course Detail"){
 @loginheader("Course Detail")  
<div class="page-focus">

<!-- Course Detail -->
<div class="row"><!--Outside Row Fluid -->
<div class="span16"><!-- course name -->
<div class="masthead">
<h3 class="muted" id="cname">@ec.name</h3> <a href="@ec.url" target="_blank">Go to course site</a>
</div>
<div class="row"><!--inside row fluid-->
<div class="span5"><!-- row1 course window -->
<center>
<div class="jumbotron">
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img data-src="holder.js/300x200" src="/assets/images/2.png" alt="">
<!--five star voting -->
<div id="star" data-score="3"></div>
<!--End of five star voting-->
<p><a href="/institution/@ein.id" id="institution">@ein.name...</a></p>
<p><a href="/instructor/@ei.id" id="instructor">@ei.name...</a></p>
<p><a class="btn span3" href="/courselectures/@Id">Course Lectures</a></p>
<p><input type="hidden" id="hideid" value="@Id"/></p>
@if(!session.containsKey("email")){
	
}


@if(session.containsKey("email")){
	@if(ecs == null) {
		<p class="enrollCourse"><a class="btn span3" href="/enrollcourse/@Id">Enroll to Course</a></p>
	} else {
		<p class="dropCourse"><a class="btn span3" href="/dropcourse/@Id">Drop Course</a></p>
	}
	
	@if(ec.created_by == Integer.parseInt(session.get("user_id"))) {	
		<p><a class="btn span3" href="/editcourse/@Id">Edit Course Information</a></p>
		<p><a class="btn span3" href="/addlecture/@Id">Add Course Lecture</a></p>
		<p><a class="btn span3" href="/enrolledmembers/@Id">Enrolled Members</a></p>
	}
}

</div>
</li>
</ul>
</div><!--Course Information -->
</center>
</div><!-- end row1 course window-->

<div class="span9"><!-- row2 course window -->
<!--Course Description -->
<div>
<h3>Description Course</h3>
<p>@ec.description</p>
</div>
<!--End of Course Description -->
<!--Course Tags -->
<div>
<h3>Tags</h3>
<div id="tagp">
@for(tag <- et) {
	<a class="btn" href="#">@tag.tag</a>
}
</div>
@if(session.containsKey("email")){
<!--Add New Tag-->
<div class="control-group">
<label class="control-label" for="newtag">New Tag</label>
<div class="controls">
<!--tag browser -->
<input type="Text" id="tags">
</t><button type="submit" id="newtag">add tag</button>
</div>
</div>
}
</div>
<!-- End of Add new Tag-->

<!--End of Course Tags -->

<!--User Comments -->

<!--End of User Comments -->
</div><!-- end row2 course window-->
</div><!-- inside row fluid -->
</div><!--course name -->
</div><!-- outside row fluid -->
</div><!-- page-focus -->
<hr>


<!--User Messages -->
<div class="container">
<ul class="thumbnails">
<li><h3>Comments<i class="icon-comment"></i></h3></li>
</ul>
<div id="comment_list">

</div>

@if(session.containsKey("email")){
	<ul class="thumbnails">
	<li>
	<div class="control-group">
	<div class="controls">
	<textarea class="span12" rows="4" id="comment"></textarea>
	<button type="submit" class="btn" id="comment_sbmt">Add Comment</button>
	</div>
	</div>
	</li>
	</ul>
}
</div>

<!--End of user Messages -->

<!--Footer -->
<hr>
<div class="footer">
<p>&copy; 574 Project 2013</p>
</div>
</div> <!-- /container -->

<script type="text/javascript">
	$(document).ready(function(){
		addRatingFeature();
	});

	
	$.ajax({ url:"/isEnrolledCourse/@Id",
		type:"GET",
	      success: function( result ) {
	    	  if(result){
	    		  $('.enrollCourse').hide();
	    		  $('.dropCourse').show();
	    	  }else{
	    		  $('.enrollCourse').show();
	    		  $('.dropCourse').hide();
	    	  }
	      }
	});

	function addRatingFeature(){
		$.ajax({url:"/showRatemean/@Id",
				type:"GET",
		          success: function( result ) {
		          	  var rate=result[0];
		        	  $('#star').raty(
		        	  {
			        	  half     : true,
						  size     : 24,
						  starHalf : '../assets/raty-2.5.2/lib/img/star-half-big.png',
						  starOff  : '../assets/raty-2.5.2/lib/img/star-off-big.png',
						  starOn   : '../assets/raty-2.5.2/lib/img/star-on-big.png',
			        	  round: { down: .26, full: .6, up: .76 },
			        	  score: function() 
				        	  {
					        	  if(rate.course_rate!=null)
				                  return rate.course_rate;
				                  else return 0;
			                  },
			           	  click:function(score){
			           	  	$.ajax(
				           	  	{
									url:"/addRate",
									type:"GET",
									data:{Id:$("#hideid").val(),rate:score},
									success:function(data){
									addRatingFeature();
									}
								}
							);
			           	  }    
	                  });
		           } });
	}


$.ajax({ url:"/coursecomments/"+"@Id",
			type:"GET",
	          success: function( result ) {			
	        	  for(var l=0,len=result.length;l<len;l++){
	        		  var course = result[l];
	        		  var tr = $('<ul class="thumbnails">');
	        		  tr.append($('<li>'))
					    .append($('<p>').html(course.comment))
						//.append($('<p><b>Comment Date/Time:</b>').html(course.comment_date))
						.append($('<div><a class="btn btn-success" href="javascript:;" id="cmt-agree" onClick="agree('+course.comment_id+');" >agree</a> # of agree: <b>'+course.agree+'</b> <a class="btn btn-danger" href="javascript:;" id="cmt-disagree" onClick="disagree('+course.comment_id+');" >disagree</a> # of disagree: <b>'+course.disagree+'</b></div>'))						
						.append($('<p><b><i class="icon-user"></i></b>').html('<b><i>Commented By:</i></b> '+course.name+' '+course.surname))
						.append($('</li>'))
						.append($('</ul>'))	        	  	
						$("#comment_list").append(tr);
	        	  }	        	  				  
	          }
	    });


</script>


}


